{include="header"}

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title">Estadísticas</h3>
   </div>
   <div class="panel-body">
      Hay un total de <b>{$fsc->stats['total']}</b> artículos,
      <b>{$fsc->stats['con_stock']}</b> de ellos tienen stock,
      <b>{$fsc->stats['publicos']}</b> son públicos
      y <b>{$fsc->stats['bloqueados']}</b> están bloqueados.
      La última actualización de los artículos es del <b>{$fsc->stats['factualizado']}</b>.
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title">Top ventas (unidades)</h3>
   </div>
   <div class="panel-body">
      <div id="chart_top_ventas">
         <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
               <div class="text-center">
                  <canvas id="canvas_chart_top_ventas" height="125"></canvas>
                  <div id="legend_chart_top_ventas"></div>
               </div>
            </div>
         </div>
         <div class="row">
            {loop="$fsc->top_ventas"}
            <div class="col-lg-3 col-md-3 col-sm-3"><a href="{$value.0->url()}">{$value.0->referencia}</a> ({$value.1})</div>
            {else}
            <div class="col-lg-12 col-md-12 col-sm-12">Sin resultados.</div>
            {/loop}
         </div>
      </div>
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title">Top compras (Unidades)</h3>
   </div>
   <div class="panel-body">
      <div id="chart_top_compras">
         <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
               <div class="text-center">
                  <canvas id="canvas_chart_top_compras" height="125"></canvas>
                  <div id="legend_chart_top_compras"></div>
               </div>
            </div>
         </div>
         <div class="row">
            {loop="$fsc->top_compras"}
            <div class="col-lg-3 col-md-3 col-sm-3"><a href="{$value.0->url()}">{$value.0->referencia}</a> ({$value.1})</div>
            {else}
            <div class="col-lg-12 col-md-12 col-sm-12">Sin resultados.</div>
            {/loop}
         </div>
      </div>
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title">Búsquedas de artículos</h3>
   </div>
   <div class="panel-body">
      <div class="container-fluid">
         <div class="row">
            {loop="$fsc->articulo->get_search_tags()"}
            <div class="col-lg-3 col-md-3 col-sm-3">{$value.tag} ({$value.count})</div>
            {else}
            <div class="col-lg-12 col-md-12 col-sm-12">Ninguna búsqueda realizada.</div>
            {/loop}
         </div>
      </div>
   </div>
</div>

<script>
   var barChartData_top_ventas = {
      labels: [{loop="$fsc->top_ventas"}{if="$counter<10"}"{$value.0->referencia}",{else}"{$value.0->referencia}"{/if}{/loop}],
      datasets : [
         {
            label: "Top ventas",
            fillColor : "rgba(125,234,125,0.2)",
            strokeColor : "rgba(125,234,125,0.8)",
            highlightFill: "rgba(125,234,125,0.75)",
            highlightStroke: "rgba(125,234,125,1)",
            data : [{loop="$fsc->top_ventas"}{if="$counter<10"}"{$value.1}",{else}"{$value.1}"{/if}{/loop}]
         }
      ]
   }
   
   var barChartData_top_compras = {
      labels: [{loop="$fsc->top_compras"}{if="$counter<10"}"{$value.0->referencia}",{else}"{$value.0->referencia}"{/if}{/loop}],
      datasets : [
         {
            label: "Top compras",
            fillColor : "rgba(241,129,129,0.2)",
            strokeColor : "rgba(241,129,129,0.8)",
            highlightFill : "rgba(241,129,129,0.75)",
            highlightStroke : "rgba(241,129,129,1)",
            data : [{loop="$fsc->top_compras"}{if="$counter<10"}"{$value.1}",{else}"{$value.1}"{/if}{/loop}]
         }
      ]
   }
   
   var options = {
      responsive: true,
      animation: false,
      tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
      segmentStrokeColor : "#f9f9f9",
      legendTemplate :   "<ul>"
                        +"<% for (var i=0; i<datasets.length; i++){%>"
                        +"<li>"
                           +"<span style=\"background-color:<%=datasets[i].fillColor%>\">"
                              +"<%if(datasets[i].label){%><%=datasets[i].label%><%}%>"
                           +"</span>"
                        +"</li>"
                        +"<%}%>"
                     +"</ul>"
   }
   
   window.onload = function(){
      var ctx_canvas_chart_top_ventas = document.getElementById("canvas_chart_top_ventas").getContext("2d");
      var Chart_bar_top_ventas = new Chart(ctx_canvas_chart_top_ventas).Bar(barChartData_top_ventas, options);
      var Chart_legend_top_ventas = document.getElementById('legend_chart_top_ventas');
      Chart_legend_top_ventas.innerHTML = Chart_bar_top_ventas.generateLegend();
      
      var ctx_canvas_chart_top_compras = document.getElementById("canvas_chart_top_compras").getContext("2d");
      var Chart_bar_top_compras = new Chart(ctx_canvas_chart_top_compras).Bar(barChartData_top_compras, options);
      var Chart_legend_top_compras = document.getElementById('legend_chart_top_compras');
      Chart_legend_top_compras.innerHTML = Chart_bar_top_compras.generateLegend();
   }
</script>

{include="footer"}
